<template>
    <div class="publicTransPage">
      <div class="publicLeft">
        <div class="header headerGreen">轨道交通数据总览</div>
        <div class="trainData clearfix">
          <div
            v-for="item of trainList"
            :key="item.id"
            class="trainItem"
          >
            <p class="name">{{ item.name }}</p>
            <p class="value">{{ item.value }}<span v-if="item.unit">{{ item.unit }}</span></p>
          </div>
        </div>
        <div class="header headerBlue">今日客流数据</div>
        <div class="passengerItem passengerItemIn">
          <div class="name">总进站人次</div>
          <div class="value">
            <dv-digital-flop :config="passengerInConfig" style="width:200px;height:50px;" />
          </div>
        </div>
        <div class="passengerItem passengerItemOut">
          <div class="name">总出站人次</div>
          <div class="value">
            <dv-digital-flop :config="passengerOutConfig" style="width:200px;height:50px;" />
          </div>
        </div>
        <div class="passengerChart">
          <dv-charts :option="passengerOption" style="height: 100%;width: 100%;"/>
        </div>
      </div>
      <div class="publicMiddle"></div>
      <div class="publicRight">
        <div class="header headerRed">车站事件预警</div>
        <div class="stationTable">
          <dv-scroll-board
            :config="stationTableConfig"
            style="width: 100%; height: 100%"
          />
        </div>
        <div class="header headerRed">车辆事件预警</div>
        <div class="carTable">
          <dv-scroll-board
            :config="carTableConfig"
            style="width: 100%; height: 100%"
          />
        </div>
      </div>
    </div>
  </template>
<script>
export default {
  data(){
    function formatter (number) {
      const numbers = number.toString().split('').reverse()
      const segs = []
      while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
      return segs.join(',').split('').reverse().join('')
    }
    return{
      trainList: [
        { id:1, name: '地铁线路总数', value: 15, unit: '' },
        { id:2, name: '正在施工', value: 2, unit: '' },
        { id:3, name: '地铁站总数', value: 1365, unit: '' },
        { id:4, name: '出入口', value: 5682, unit: '' },
        { id:5, name: '今日已发班次', value: 11365, unit: '' },
        { id:6, name: '今日人流', value: 659, unit: '万' },
      ],
      passengerInConfig: {
        number: [2654658],
        content: '{nt}',
        style: {
          fontSize: 30,
          fill: '#fff'
        },
        formatter
      },
      passengerOutConfig: {
        number: [1254893],
        content: '{nt}',
        style: {
          fontSize: 30,
          fill: '#fff'
        },
        formatter
      },
      passengerOption: {
        legend: {
          top: 10,
          data: [
            {
              name: "进站",
              color: "#3D9FFF",
            },
            {
              name: "出站",
              color: "#6BD9E4",
            },
          ],
          textStyle: {
            fontSize: 10,
            fill: "#fff",
          },
        },
        grid: {
          left: "10%",
          right: "10%",
          top: "10%",
          bottom: "20%",
        },
        xAxis: {
          data: ["11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00"],
          axisLabel: {
            style: {
              fill: "#fff",
              fontSize: 10,
            },
          },
        },
        yAxis: {
          data: "value",
          axisLabel: {
            style: {
              fill: "#fff",
              fontSize: 10,
            },
          },
          splitLine: {
            style: {
              stroke: "#14344d",
            },
          },
        },
        series: [
          {
            name: "进站",
            data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
            type: "bar",
            gradient: {
              color: ["#027BF7", "#3D9FFF"],
            },
          },
          {
            name: "出站",
            data: [1000, 1230, 1400, 1500, 2500, 3200, 2985],
            type: "bar",
            gradient: {
              color: ["#90F5E0", "#6BD9E4"],
            },
          },
        ],
      },
      stationTableConfig: {
        header: [
          "<span style='text-align:center'>车站</span>",
          "<span style='text-align:center'>位置</span>",
          "<span style='text-align:center'>时间</span>",
          "<span style='text-align:center'>预警类型</span>",
        ],
        rowNum: 6,
        headerBGC: "none",
        oddRowBGC: "none",
        evenRowBGC: "#1a3c70",
        align: ["center", "center", "center"],
        data: [
          ["知春路", "B出站口", "17:12", "<span style='color:#FFC167'>人流量大-2级</span>"],
          ["知春路", "B出站口", "17:12", "<span style='color:#FFC167'>人流量大-2级</span>"],
          ["知春路", "B出站口", "17:12", "<span style='color:#FFC167'>人流量大-2级</span>"],
          ["知春路", "B出站口", "17:12", "<span style='color:#FFC167'>人流量大-2级</span>"],
          ["知春路", "B出站口", "17:12", "<span style='color:#FFC167'>人流量大-2级</span>"],
          ["知春路", "B出站口", "17:12", "<span style='color:#FFC167'>人流量大-2级</span>"],
          ["知春路", "B出站口", "17:12", "<span style='color:#FFC167'>人流量大-2级</span>"],
          ["知春路", "B出站口", "17:12", "<span style='color:#FFC167'>人流量大-2级</span>"],
        ],
      },
      carTableConfig: {
        header: [
          "<span style='text-align:center'>线路</span>",
          "<span style='text-align:center'>车辆编号</span>",
          "<span style='text-align:center'>时间</span>",
          "<span style='text-align:center'>预警类型</span>",
        ],
        rowNum: 6,
        headerBGC: "none",
        oddRowBGC: "none",
        evenRowBGC: "#1a3c70",
        align: ["center", "center", "center"],
        data: [
          ["10号", "11562", "17:12", "<span style='color:#FF6E67'>11562</span>"],
          ["10号", "11562", "17:12", "<span style='color:#FF6E67'>11562</span>"],
          ["10号", "11562", "17:12", "<span style='color:#FF6E67'>11562</span>"],
          ["10号", "11562", "17:12", "<span style='color:#FF6E67'>11562</span>"],
          ["10号", "11562", "17:12", "<span style='color:#FF6E67'>11562</span>"],
          ["10号", "11562", "17:12", "<span style='color:#FF6E67'>11562</span>"],
          ["10号", "11562", "17:12", "<span style='color:#FF6E67'>11562</span>"],
          ["10号", "11562", "17:12", "<span style='color:#FF6E67'>11562</span>"],
        ],
      }
    }
  },
  methods:{},
  created(){},
  mounted(){}
}
</script>

<style lang="scss" scoped>
@import "../../style//publicTrans.scss";
</style>
  